<template>
    <div style="width: 1000px;">
        <div style="margin: 20px 10px; ">
            <div style="padding-left: 300px">
                <el-input v-model="search " style="width: 50%" clearable placeholder="请输入名称查询"></el-input>
                <el-button type="primary" style="margin: 0 10px" @click="handleClick">搜索</el-button>
            </div>
        </div>
        <h3 style="margin: 40px 60px">搜索结果如下：</h3>
        <ul class="me-allct-items">
            <li v-for="b in bookList" @click="" :key="b.id" class="me-allct-item">
                <router-link :to="{name:'bookInformation', params: {id:b.id}}" target="_blank">
                    <div class="me-allct-content">
                        <a class="me-allct-info">
                            <img class="me-allct-img"
                                 :src="b.cover"/>
                            <h3 class="me-allct-name">{{b.name}}</h3>
                        </a>
                    </div>
                </router-link>
            </li>
        </ul>
        <div>
            <div v-if="loadState" style="padding: 20px;margin-left: 450px;" @click="loadMore()" >加载更多</div>
            <div v-else style="margin-left: 420px;padding: 20px;">已经加载全部内容！</div>
        </div>
    </div>
</template>

<script>

    import request from "../utils/request";

    export default {
        name: "search",
        created() {
            this.handleClick()
            // window.addEventListener("scroll", this.handleScroll, true);
            // console.log(this.$route.query.title)
        },
        data() {
            return {
                search: this.$route.query.title,
                bookList: [],
                currentPage: 1,
                pageSize: 12,
                total: 0,
                loadState:true
            }
        },
        methods: {
            handleClick() {
                this.currentPage= 1,
                    this.pageSize= 12,
                    this.total= 0,
                    this.loadState=true
                    request.get("/book/search", {
                        params: {
                            pageNum: this.currentPage,
                            pageSize: this.pageSize,
                            search: this.search
                        }
                    }).then(res => {
                        if (res.data.records.length<this.pageSize){
                            this.loadState = false
                        }
                        this.bookList = res.data.records
                        this.total = res.data.total
                    })

            },
            loadMore() {
                    request.get("/book/search", {
                        params: {
                            pageNum: this.currentPage+1,
                            pageSize: this.pageSize,
                            search: this.search
                        }
                    }).then(res => {
                        console.log(res.data.records)
                        if (res.data.records.length<this.pageSize){
                            this.loadState = false
                        }
                        this.bookList.push(...res.data.records)
                        this.total += res.data.total
                        this.currentPage++;
                    })

            },
           /* handleScroll() {
                let scrollTop = document.documentElement.scrollTop;//滚动高度
                let clientHeight = document.documentElement.clientHeight;//可视高度
                let scrollHeight = document.documentElement.scrollHeight;//内容高度
                if (scrollTop + clientHeight + 1 >= scrollHeight) {
                    this.fullscreenLoading = true;
                    setTimeout(() => {
                        this.fullscreenLoading = false;
                    }, 2000);
                    this.currentPage += 1;
                    console.log("搜索分页" )
                    request.get("/book/search", {
                        params: {
                            pageNum: this.currentPage,
                            pageSize: this.pageSize,
                            search: this.search
                        }
                    }).then(res => {
                        // console.log(res)
                        this.bookList.push(...res.data.records)
                        this.total += res.data.total
                    })
                    // console.log(this.bookList)
                }
            }*/

        }

    }
</script>

<style scoped>
    .me-allct-body {
        margin: 60px auto 140px;
    }

    .me-allct-container {
        width: 1000px;
    }

    .me-allct-items {
        padding-top: 2rem;
    }

    .me-allct-item {
        width: 25%;
        display: inline-block;
        margin-bottom: 2.4rem;
        padding: 0 .7rem;
        box-sizing: border-box;
    }

    .me-allct-content {
        display: inline-block;
        width: 100%;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        transition: border-color .3s;
        text-align: center;
        padding: 1.5rem 0;
    }

    .me-allct-info {
        cursor: pointer;
    }

    .me-allct-img {
        margin: -40px 0 10px;
        width: 130px;
        height: 180px;
        vertical-align: middle;
        border-radius: 5%;

    }

    .me-allct-name {
        font-size: 14px;
        /*font-weight: 150;*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-top: 4px;
    }

    .me-allct-description {
        min-height: 50px;
        font-size: 13px;
        line-height: 25px;
    }

    .me-allct-meta {
        font-size: 12px;
        color: #969696;
    }
</style>